<html>
<head>
    <title>SIMILE | Timeline | Examples | The Life of Monet</title>
    <link rel='stylesheet' href='../styles.css' type='text/css' />
    <script src="../../api/timeline-api.js" type="text/javascript"></script>
    <script>
        var tl;
        function onLoad() {
            var eventSource = new Timeline.DefaultEventSource(0);
            
            var theme = Timeline.ClassicTheme.create();
            theme.event.bubble.width = 320;
            theme.event.bubble.height = 220;
            theme.ether.backgroundColors[1] = theme.ether.backgroundColors[0];
            var d = Timeline.DateTime.parseGregorianDateTime("1870")
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "10%", 
                    intervalUnit:   Timeline.DateTime.DECADE, 
                    intervalPixels: 200,
                    date:           d,
                    showEventText:  false,
                    theme:          theme
                }),
                Timeline.createBandInfo({
                    width:          "90%", 
                    intervalUnit:   Timeline.DateTime.DECADE, 
                    intervalPixels: 200,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme
                })
            ];
            bandInfos[0].etherPainter = new Timeline.YearCountEtherPainter({
                startDate:  "Nov 14 1840 00:00:00 GMT",
                multiple:   5,
                theme:      theme
            });
            bandInfos[0].syncWith = 1;
            bandInfos[0].highlight = false;
            bandInfos[0].decorators = [
                new Timeline.SpanHighlightDecorator({
                    startDate:  "Nov 14 1840 00:00:00 GMT",
                    endDate:    "Dec 05 1926 00:00:00 GMT",
                    startLabel: "birth",
                    endLabel:   "death",
                    color:      "#FFC080",
                    opacity:    50,
                    theme:      theme
                })
            ];
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadXML("monet.xml", function(xml, url) {
                eventSource.loadXML(xml, url);
            });
        }
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
    </script>
</head>
<body onload="onLoad();" onresize="onResize();">
<ul id="path">
  <li><a href="http://simile.mit.edu/" title="Home">SIMILE</a></li>
  <li><a href="../../" title="Timeline">Timeline</a></li>
  <li><a href="../" title="Examples">Examples</a></li>
  <li><span>The Life of Monet</span></li>
</ul>
<div id="body">
    <h1>The Life of Monet</h1>
    <p>Sources:
        <ul>
            <li><a href="http://en.wikipedia.org/wiki/Monet">http://en.wikipedia.org/wiki/Monet</a></li>
            <li><a href="http://www.accents-n-art.com/artists/claude-monet-biography.html">http://www.accents-n-art.com/artists/claude-monet-biography.html</a></li>
        </ul>
    </p>
    <div id="tl" class="timeline-default" style="height: 400px;">
    </div>
</div>
</body>
</html>